<script setup lang='ts'>
  import { reactive } from 'vue';
  import { luckDrawApi } from '@/api/controller';
  import { ToastWarning, Toastloading } from '@/utils/public';
  import Pagination from "@/components/Pagination/index.vue";
  const action = reactive({
    dialogFormVisible:false,
    dialoglogTableVisible:false,
    total:0,
    title:'',
    extract_pool_id:'',
    list:[] as Array<any>,
    logList:[] as Array<any>,
  })
  const listQuery = reactive({
    extract_pool_id:'',
    page: 1,
    limit: 20,
  })
  const getList = async()=> {
    if(!action.extract_pool_id) return ToastWarning('缺少抽取礼物池ID')
    const loading = Toastloading()
    const res = await luckDrawApi.wishWheelPoolExtractLessNum({
      extract_pool_id:action.extract_pool_id,
    })
    loading.close()
    const { data=[] } = res || {}
    action.list = data
  }
  const getlogList = async()=> {
    if(!action.extract_pool_id) return ToastWarning('缺少抽取礼物池ID')
    const loading = Toastloading()
    const res = await luckDrawApi.wishWheelExtractPoolLogList(listQuery)
    loading.close()
    const { list=[], total=0 } = res.data || {}
    action.total = total
    action.logList = list
  }
  const openLogList = async()=> {
    listQuery.page = 1
    listQuery.limit = 20
    action.logList = []
    action.total = 0
    await getlogList()
    action.dialoglogTableVisible = true
  }
  const openDialog = async(query:any={})=> {
    const { id=0, pool_name='' } = query
    if(id != action.extract_pool_id) {
      action.list = []
    }
    action.extract_pool_id = id
    listQuery.extract_pool_id = id
    action.title = `抽取礼物池：${pool_name}-剩余数量`
    await getList()
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog xm-dialog-cont-y"
      v-model="action.dialogFormVisible"
      width="50%"
      :title="action.title">
      <el-button class="xm-mrAuto xm-mb10" type="primary" @click="openLogList" >抽取日志</el-button>
      <el-table
        class="xm-TableCenter"
        :data="action.list"
        border
      >
        <el-table-column width="80" prop="gift_id" label="礼物ID" />
        <el-table-column min-width="120" prop="name" label="礼物名称" />
        <el-table-column min-width="90" sortable prop="price" label="礼物价格" />
        <el-table-column min-width="90" sortable prop="true_num" label="抽取数量" />
        <el-table-column min-width="90" sortable prop="less_num" label="剩余抽取数量" />
        <el-table-column min-width="90" sortable prop="reward_num" label="产出数量" />
      </el-table>
    </el-dialog>
    <el-dialog
      top="5vh"
      class="xm-dialog xm-dialog-cont-y"
      v-model="action.dialoglogTableVisible"
      width="60%"
      :title="action.title">
      <el-table
        class="xm-TableCenter"
        :data="action.logList"
        border
      >
        <el-table-column width="80" prop="gift_id" label="礼物ID" />
        <el-table-column min-width="120" prop="gift_name" label="礼物名称" />
        <el-table-column min-width="80" sortable prop="gift_price" label="礼物价格" />
        <el-table-column min-width="80" sortable prop="extract_num" label="计划抽取数量" />
        <el-table-column min-width="80" sortable prop="true_num" label="实际抽取数量" />
        <el-table-column min-width="80" prop="admin_name" label="操作人" />
        <el-table-column width="180" prop="updated_at" label="操作时间" />
      </el-table>
      <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
        v-model:limit="listQuery.limit" @pagination="getlogList" />
    </el-dialog>
  </div>
</template>
